<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/postArticle.css" th:href="@{/css/postArticle.css}">
</head>
<body>
<div class="article-publish-container">
    <form th:action="@{/posts/add}"  method="post" enctype="multipart/form-data">
    <input type="text" id="titleInput" placeholder="请输入标题（最多30个字）" maxlength="100" name="title">
    <textarea id="contentTextarea" placeholder="请输入正文（最多1000个字）" name="content" maxlength="10000"></textarea>
    <div class="publish-settings">
        <h3>发布设置</h3>
        <div class="cover-upload">
            <!-- <img id="preview" src="#" alt=""> -->
            <label for="coverUpload">添加封面

            </label>
            <div class="add-img"> <div class="add-img-outer"><input type="file" id="coverUpload" name="image" accept="image/jpeg, image/jpg, image/png">
                <div class="cover-upload-placeholder" id="coverUploadPlaceholder">
                    + 添加文章封面
                </div>
                <button id="deleteButton" type="button">删除图片</button>
            </div>
                <p class="cover-upload-tip">图片上传格式支持 JPEG、JPG、PNG</p></div>

        </div>

        <div class="dropdown-container">
            <label for="drop2" style="margin-right: 46px;">类别</label>
            <select id="drop2" name="categoryName">
                <option value="">选择标签</option>
                <option value="人工智能">人工智能</option>
                <option value="区块链技术">区块链技术</option>
                <option value="新能源科技">新能源科技</option>
                <option value="电商运营">电商运营</option>
                <option value="古典文学">古典文学</option>
                <option value="现代艺术">现代艺术</option>
                <option value="国际历史">国际历史</option>
                <option value="国内体育">国内体育</option>
                <option value="国际体育">国际体育</option>
                <option value="心理健康">心理健康</option>
                <option value="健身塑形">健身塑形</option>
                <option value="环球美食">环球美食</option>
                <option value="本地美食">本地美食</option>
                <option value="境外旅游">境外旅游</option>
                <option value="国内旅游">国内旅游</option>
                <option value="科技数码">科技数码</option>
                <option value="幼儿教育">幼儿教育</option>
            </select>
            <span class="question-mark-icon">&#9733;</span>
        </div>


    </div>
    <div class="bottom-bar">

        <span class="word-count">字数: <span id="wordCount">0</span></span>
        <span class="markdown-tip">Markdown 语法识别中 ②</span>
        <div class="button">
            <button id="previewButton">预览</button>
            <button id="publishButton" type="submit">发布</button>
        </div>
    </div>
    </form>
</div>
<script th:inline="javascript">



    function showCustomAlert(message, duration) {
        let customAlert = document.getElementById('customAlert');
        if (!customAlert) {
            div_outter=document.createElement('div');
            customAlert = document.createElement('div');
            customAlert.id = 'customAlert';
            // customAlert.style.margin='7px 12px';
            const alertMessage = document.createElement('p');
            alertMessage.id = 'alertMessage';
            customAlert.appendChild(alertMessage);

            document.body.appendChild(customAlert);
        }

        const alertMessage = document.getElementById('alertMessage');

        alertMessage.textContent = message;
        if(alertMessage.textContent==null){
            customAlert.style.display = 'none';
        }

        customAlert.style.display = 'block';
        setTimeout(() => {
            customAlert.style.display = 'none';
        }, duration);
    }
    let result = [[${result}]];
    let error = [[${errorMessage}]];
    if (result && result !== '') {
        showCustomAlert(result, 3000);
    }
    if (error && error !== '') {
        showCustomAlert(error, 3000);
    }

    // showCustomAlert(result, 3000);
    // showCustomAlert(error, 3000);
    console.log(result)
    console.log(error)
</script>
</body>

<script src="../static/js/postArticle.js" th:src="@{/js/postArticle.js}"></script>
</html>